<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">生活服务</el-breadcrumb-item>
                <el-breadcrumb-item class="up"><a @click="goTo('/ArtisanList')">技工列表</a></el-breadcrumb-item>
                <el-breadcrumb-item>查看</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 列表 -->
            <div class="userinformation">
              <div class="title">账号信息</div>
              <div class="msg">
                <div> <p class="title">技工ID：</p><p>{{msg.mechanicId}}</p></div>
                <div>
                  <p class="title">入驻类目：</p>
                  <el-select v-model="cname" placeholder="请选择">
                    <el-option
                      v-for="item in classifyList"
                      :key="item.index"
                      :label="item.cname"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div>
                  <p class="title">头像：</p>
                  <el-upload class="avatar-uploader"
                    action
                    multiple
                    :limit="1"
                    :show-file-list="true"
                    :http-request="handleUploadMainPic">
                    <img v-if="msg.responseVo.headImg" :src="msg.responseVo.headImg" class="avatar">
                  </el-upload>
                </div>
                <div> <p class="title">姓名：</p><input type="text" v-model="msg.responseVo.userName" class="input" /></div>
                <div> <p class="title">微信昵称：</p><input type="text" v-model="msg.responseVo.nickName" class="input" /></div>
                <div>
                  <p class="title">性别：</p>
                  <el-radio-group v-model="msg.responseVo.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </div>
                <div>
                  <p class="title">地址：</p>
                  <input type="text" value="四川省" class="input" :disabled="true" />
                  <input type="text" value="成都市" class="input" :disabled="true" />
                  <el-select v-model="area" placeholder="请选择">
                    <el-option
                      v-for="item in areaList"
                      :key="item.index"
                      :label="item.areaName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div>
                  <p class="title title1">地址：</p>
                  <input type="text" v-model="msg.responseVo.address" class="input inputLong" />
                </div>
                <div>
                  <p class="title">坐标：</p>
                  <input type="text" v-model="msg.responseVo.lng" class="input" placeholder="经度" />
                  <input type="text" v-model="msg.responseVo.lat" class="input" placeholder="纬度"/>
                </div>
                <div>
                  <p class="title">标签：</p>
                  <el-checkbox-group v-model="tags">
                    <el-checkbox v-for="(item,index) in taglist" :label="item.dictId" :key="index">{{item.name}}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div> <p class="title">手机号码：</p><p>{{msg.responseVo.phoneNumber}}</p></div>
                <div> <p class="title">注册时间：</p><p>{{msg.responseVo.createTime | dateForma('YYYY-MM-DD HH:mm:ss')}}</p></div>
                <div>
                  <p class="title">工作状态：</p>
                  <el-radio-group v-model="msg.status">
                    <el-radio :label="1">接单中</el-radio>
                    <el-radio :label="2">休息</el-radio>
                  </el-radio-group>
                </div>
                <div>
                  <p class="title">认证状态：</p>
                  <el-radio-group v-model="msg.responseVo.isPass">
                    <el-radio :label="1">已认证</el-radio>
                    <el-radio :label="2">未通过</el-radio>
                    <el-radio :label="3">待审核</el-radio>
                  </el-radio-group>
                </div>
                <div>
                  <p class="title">账号状态：</p>
                  <el-radio-group v-model="msg.accountStatus">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="2">禁用</el-radio>
                    <el-radio :label="3">注销</el-radio>
                  </el-radio-group>
                </div>
                <p class="saveBtn" @click="saveBtn()">保存</p>
              </div>
              <div class="title">认证资料</div>
              <!-- <div class="msg">
                <div>
                  <p class="title title2">技能证书/营业执照：</p>
                  <div class="imgs">
                    <img :src="msg.responseVo.skillsCertificatePic" class="img1" v-if="msg.responseVo.skillsCertificatePic">
                    <img src="../../assets/defaultImg.png" class="img1" v-else>
                  </div>
                </div>
                <div>
                  <p class="title title2">身份证：</p>
                  <div class="imgs" v-for="(pic,index) in idPic" :key="index" v-if="msg.responseVo.idCardPic">
                    <img :src="pic.url" class="img1">
                  </div>
                  <div class="imgs" v-else>
                    <img src="../../assets/defaultImg.png" class="img1">
                  </div>
                </div>
                <div>
                  <p class="title title2">健康证：</p>
                  <div class="imgs">
                    <img :src="msg.responseVo.healthCertificate" class="img1" v-if="msg.responseVo.healthCertificate">
                    <img src="../../assets/defaultImg.png" class="img1" v-else>
                  </div>
                </div>
              </div> -->
              <div class="msg1">
                <div class="box">
                  <div class="p">技能证书/营业执照：</div>
                  <div class="imgs">
                    <img :src="msg.responseVo.skillsCertificatePic" class="img1" v-if="msg.responseVo.skillsCertificatePic">
                    <img src="../../assets/defaultImg.png" class="img1" v-else>
                  </div>
                </div>
                <div class="box">
                  <div class="p">身份证：</div>
                  <div class="imgs" v-for="(pic,index) in idPic" :key="index" v-if="msg.responseVo.idCardPic">
                    <img :src="pic.url" class="img1">
                  </div>
                </div>
                <div class="box">
                  <div class="p">健康证：</div>
                  <div class="imgs">
                    <img :src="msg.responseVo.healthCertificate" class="img1" v-if="msg.responseVo.healthCertificate">
                    <img src="../../assets/defaultImg.png" class="img1" v-else>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'

  export default {
    name: 'ArtisanListDetail',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        id:'',
        cname:'',//入驻类目
        area:'',//所在区的名称
        tags: [],//标签
        taglist: [],//所有标签
        idPic:[],//身份证
        msg:{
          mechanicId:'',
          responseVo:{
            goodsClassifyId:'',
            headImg:'',
            userName:'',
            nickName:'',
            province:'',
            city:'',
            area:'',
            address:'',
            lng:'',
            lat:'',
            phoneNumber:'',
            createTime:'',
            status:'',
          },
          attestatus:'',
          imgs:[],
        },
        classifyList: [],//一级类目
        areaList:[],//所有区
      }
    },
    mounted() {
      // 取到路由带过来的参数
      this.id = JSON.parse(JSON.stringify(this.$route.query.data.id));
      console.log('路由带过来的参数',this.id);
      this.findDetail();
    },
    filters: {// 时间格式过滤
      dateForma(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
        return moment(dataStr).format(pattern)
      }
    },
    methods: {
      //路由
      goTo(path) {
        this.$router.push(path);
      },
      //根据id查看技工详情
      findDetail(){
        this.$axios.post(this.baseURL1+'admin/mechanicUser/info',{
          "id":this.id,
          "requestSource":"PC",
        }).then((res)=>{
          // console.log(res,"查询技工详情");
          if(res.data.code==1){
            this.msg = res.data.data;
            this.gerAllClassifyList()//获取所有一级类目
            this.getArea()//查所在区
            this.getTag()//获取技工标签
            //this.tags =  res.data.data.tag;
            this.tags = res.data.data.tag.substring(0, res.data.data.tag.lastIndexOf(','))
            this.tags= this.tags.split(',');//商品标签
            for(var i=0;i<this.tags.length;i++){//将商品id转换成int类型
               this.tags[i]= parseInt(this.tags[i])
            }
            console.log(this.tags,"查询技工详情--标签")

            if(res.data.data.responseVo.idCardPic){//身份证
              var idCardPic = res.data.data.responseVo.idCardPic.split(",");//产品副图列表
              idCardPic.map((item, index) => {//副图赋值
                this.idPic.push({ url: item })
                // console.log(this.idPic)
              })
            }
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //获取所有一级类目
      gerAllClassifyList(){
        this.$axios.post(this.baseURL1+'admin/goodsClassify/getAppGoodsClassifyList',{
          "parentId":0,
          "requestSource":"PC",
        }).then((res)=>{
          console.log("所有一级类目",res)
          if(res.data.code==1){
            this.classifyList =res.data.data.records
            for(var i=0;i<=res.data.data.records.length;i++){
              if(res.data.data.records[i].id===this.msg.responseVo.goodsClassifyId){
                this.cname = res.data.data.records[i].cname
              }
            }
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 查区
      getArea(){
        this.$axios.post(this.baseURL1+'area/getAreaList',{
          "parentId":this.msg.responseVo.city,
          "requestSource":"PC",
        }).then((res)=>{
           if(res.data.code==1){
             this.areaList = res.data.data.records
             for(var i=0;i<=res.data.data.records.length;i++){
               if(res.data.data.records[i].id===this.msg.responseVo.area){
                 this.area = res.data.data.records[i].areaName
               }
             }
           }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //获取技工标签
      getTag(){
        this.$axios.post(this.baseURL1+'admin/dictionary/listByType',{
          "type":'rzbq',
          "requestSource":"PC",
        }).then((res)=>{
          // console.log(res,"获取技工标签");
          if(res.data.code==0){
            this.taglist=res.data.data
            console.log(this.taglist)
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 获取阿里云签名
      getOssToken(){
        var _self = this;
        return new Promise((resolve,reject)=>{
          this.$axios.post(this.baseURL1+'getJsOssToken',{
            "requestSource":"PC"
          }).then(function(res){
            _self.aliyunOssToken = res.data.data;
            console.log(_self.aliyunOssToken,"通行证")
            resolve()
          }).catch(function(error){
            console.log(error);
          })
        })
      },
      // 上传头像图片
      handleUploadMainPic(option){
        console.log(option,"上传的图片");
        this.getOssToken().then(res=>{
          var _self = this;
          var getSuffix = option.file.name;
          var filename = option.file.uid + getSuffix.substring(getSuffix.lastIndexOf("."),getSuffix.length);
          console.log(filename,'filename');
          var formData = new FormData();//注意formData里append添加的键的大小写
          formData.append('key', _self.aliyunOssToken.dir + filename); //存储在oss的文件路径
          formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid); //accessKeyId
          formData.append('policy', _self.aliyunOssToken.policy); //policy
          formData.append('Signature', _self.aliyunOssToken.signature); //签名
          formData.append("file", option.file);//文件
          formData.append('success_action_status', 200); //成功后返回的操作码
          var url = _self.aliyunOssToken.host; //url
          var fileUrl = _self.aliyunOssToken.host +'/'+ _self.aliyunOssToken.dir + filename; //fileUrl文件路径
          this.$axios.post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then((res) => {
            if(res.status==200){
              this.$message({
                message: '上传成功',
                type: 'success'
              });
              //this.fileListMainPic.push({ url: fileUrl });
              //this.hideUploadMainPic = this.fileListMainPic.length >= this.limitCountMainPic;//隐藏上传图标
              console.log(fileUrl)
              this.msg.responseVo.headImg = fileUrl
            }else{
              this.$message.error('上传失败！请重新上传');
            }
          })
          .catch((err) => {
             console.log("err:",err);
             this.$message.error('上传失败！请重新上传');
          })
        })
      },
      //保存修改
      saveBtn(){
        console.log(this.msg)
        if(typeof(this.cname)=="string"){//验证入驻类目是否被修改过 修改过就改回原id值  否则就赋值最新的选项id
          this.cname = this.msg.responseVo.goodsClassifyId
        }
        console.log("入驻类目",this.cname)
        if(typeof(this.area)=="string"){//验证所在区是否被修改过 修改过就改回原id值  否则就赋值最新的选项id
          this.area = this.msg.responseVo.area
        }
        console.log("所在区",this.area)
        var label = ''
        for(var i = 0; i < this.tags.length; i++){
          label += this.tags[i]+ ","
        }
        console.log("标签",label)

        this.$axios.post(this.baseURL1+'admin/mechanicUser/infoInSave',{
          "requestSource":"PC",
          "id":this.msg.mechanicId,//技工--id
          "userId":this.msg.responseVo.userId,//技工--用户id
          "goodsClassifyId":this.cname,//技工--入驻类目
          "headImg":this.msg.responseVo.headImg,//技工--头像
          "userName":this.msg.responseVo.userName,//技工--姓名
          "nickName":this.msg.responseVo.nickName,//技工--微信昵称
          "gender":this.msg.responseVo.gender,//技工--性别
          "province":this.msg.responseVo.province,//技工--省
          "city":this.msg.responseVo.city,//技工--市
          "area":this.area,//技工--区
          "address":this.msg.responseVo.address,//技工--地址
          "lat":this.msg.responseVo.lat,
          "lng":this.msg.responseVo.lng,
          "tag":label,//技工--标签
          "phoneNumber":this.msg.responseVo.phoneNumber,//技工--手机号
          "status":this.msg.responseVo.status,//技工--工作状态
          "isPass":this.msg.responseVo.isPass,//技工--认证状态
          "accountStatus":this.msg.accountStatus,//技工--账号状态
        }).then((res)=>{
          console.log(res,"修改技工信息");
          if(res.data.code==1){
            this.$message({
              message: '保存成功',
              type: 'success'
            });
            this.$router.go(-1);//返回上一层
          }else{
            this.$message({
              message: res.data.msg,
              type: 'error'
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })

      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .msg{
    width: 100%;
    height: auto;
    p{
      display: inline-block;
    }
    .title{
      background-color: #ffffff;
      font-weight: bold;
      width: 95px;
      height: 50px;
      text-align: right;
      line-height: 50px;
      display: inline-block;
    }
    .input{
      width: 200px;
      height: 30px;
      line-height: 30px;
      border-radius: 6px;
      outline: none;
      border: 1px solid #d1d1d1;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .img{
      width: 80px;
      height: 80px;
      border: 1px solid #d1d1d1;
      border-radius: 40px;
      box-sizing: border-box;
      vertical-align: middle;
    }
    .inputLong{
      width: 610px;
    }
    .title1{
      color: #ffffff;
    }
    .title2{
      line-height: 20px;
      // padding-top: 10px;
      height: 110px;
    }
    .imgs{
      display: inline-block;
      width: auto;
      height: 110px;
      vertical-align: middle;
      img{
        width: 100px;
        height: 100px;
        padding-right: 10px;
        padding-bottom: 10px;
      }
    }
    .saveBtn{
      width: 50px;
      height: 30px;
      background-color: #f77116;
      color: #Ffffff;
      text-align: center;
      line-height: 30px;
      border-radius: 6px;
      margin-left: 95px;
      margin-bottom: 30px;
      margin-top: 10px;
      cursor: pointer;
    }
  }
  >>> .el-checkbox-group{
    display: inline-block;
  }
  >>> .el-input__inner{
    height: 30px;
    line-height: 30px;
  }
  >>> .el-input__icon{
    line-height: 30px;
  }
  .msg1{
    width: 100%;
    height: auto;
    min-height: 300px;
    .box{
      width: 100%;
      height: 110px;
      margin: 20px 0 10px;
      .p{
        background-color: #ffffff;
        font-weight: bold;
        width: 75px;
        height: 100%;
        text-align: right;
        line-height: 20px;
        display: inline-block;
        vertical-align: middle;
      }
      .imgs{
        display: inline-block;
        width: auto;
        height: 110px;
        vertical-align: middle;
        img{
          width: 100px;
          height: 100px;
          padding-right: 10px;
          padding-bottom: 10px;
        }
      }
    }
  }

  //上传图片
  .avatar-uploader{
    display: inline-block;
    width: 78px;
    height: 78px;
    border: 1px solid #d1d1d1;
    border-radius: 39px;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    line-height: 78px;
    overflow: hidden;
    .avatar{
      /* width: 100%;
      height: 100%; */
      width: 78px;
      height: 78px;
    }
  }
</style>
